<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{id}}. {{title}}</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #333;
            /* 深色背景 */
            color: #fff;
            /* 浅色文本 */
            padding: 15px;
            text-align: center;
        }

        .split-container {
            display: flex;
            height: calc(100vh - 50px);
            /* 除去 header */
            position: relative;
        }

        .left-panel {
            background-color: #ffffff;
            padding: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            width: 60%;
            /* 左侧初始宽度 */
            overflow-y: auto;
            position: relative;
            /* 以便分割线使用 */
        }

        .right-panel {
            background-color: #ffffff;
            padding: 20px;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
            width: 40%;
            /* 右侧初始宽度 */
            overflow-y: auto;
        }

        .outer-divider {
            width: 5px;
            cursor: ew-resize;
            background-color: #ccc;
            position: absolute;
            height: 100%;
        }

        .inner-divider {
            height: 5px;
            cursor: ns-resize;
            background-color: #ccc;
            position: absolute;
            width: 100%;
        }

        .top-part {
            height: 60%;
            /* 左侧顶部的初始高度 */
            overflow-y: auto;
        }

        .bottom-part {
            height: 40%;
            /* 左侧底部的初始高度 */
            overflow-y: auto;
            padding-top: 10px;
            /* 留出空间给分割线 */
        }

        footer {
            background-color: #333;
            /* 深色背景 */
            color: #fff;
            /* 浅色文本 */
            text-align: center;
            padding: 10px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        .code-editor {
            height: 80%;
            /* Ace 编辑器的高度 */
        }

        .result {
            padding: 10px;
            background-color: #f8f9fa;
            /* 浅色背景 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <header>
        <h1>Online Judge</h1>
    </header>

    <div class="split-container">
        <!-- 左侧模块 -->
        <div class="left-panel">
            <!-- 顶部题目信息 -->
            <div class="top-part" id="problem-info">
                <h2>{{id}}. {{title}}</h2>
                <p>难度：{{star}}</p>
                <pre>{{desc}}</pre>
            </div>

            <!-- 分割线，分隔题目信息和结果 -->
            <div class="inner-divider" id="inner-divider" style="top: 60%;"></div>

            <!-- 底部代码提交结果 -->
            <div class="bottom-part" id="result-container">
                <div class="result">
                    <!-- 显示代码提交的结果 -->
                </div>
            </div>
        </div>

        <!-- 外部分割线 -->
        <div class="outer-divider" id="outer-divider" style="left: 60%;"></div>

        <!-- 右侧模块 -->
        <div class="right-panel">
            <div id="code-editor" class="code-editor">{{pre_code}}</div>
            <button class="btn btn-primary" onclick="submitCode()">提交代码</button>
        </div>
    </div>

    <footer>
        <p>版权所有 &copy; 2024 Space Bule</p>
    </footer>

    <!-- 引入 jquery cdn 和 ACE cdn -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" charset="utf-8"></script>

    <script>
        // Ace 编辑器初始化
        var editor = ace.edit("code-editor");
        editor.setTheme("ace/theme/vscode"); // 主题
        editor.session.setMode("ace/mode/c_cpp"); // 语言支持

        editor.setFontSize(16);
        editor.session.setTabSize(4);
        editor.setOptions({
            enableBasicAutocompletion: true, // 自动补全
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        
        function submitCode() {
            var code = editor.getValue(); // 获取编辑器中的代码
            var id = document.querySelector("#problem-info h2").textContent.split(".")[0].trim(); // 题号
            var judge_url = "/judge/" + id; // 构建请求 URL
            // 构建JSON，通过ajax向后端发起HTTP POST请求
            $.ajax({
                method: 'POST', // 向后端发起的请求方式
                url: judge_url, // 向后端的指定URL地址发起请求
                dataType: 'json', // 后端应该返回的数据类型
                contentType: 'application/json;charset=utf-8',  // 请求的内容类型
                data: JSON.stringify({ // 向后端发送的数据
                    'code': code,
                    'input': ''
                }),
                success: function (data) {
                    showResult(data); // 处理返回的结果
                }
            });

            function showResult(data) {
                const resultDiv = document.querySelector("#result-container .result"); // 获取结果显示区域
                resultDiv.innerHTML = ""; // 清空之前的内容

                // 状态码标题
                const statusHeader = document.createElement("h5");
                statusHeader.textContent = "状态码:";
                resultDiv.appendChild(statusHeader);

                const statusText = document.createElement("p");
                statusText.textContent = `${data.status}`; // 状态码的值
                resultDiv.appendChild(statusText);

                // 原因标题
                const reasonHeader = document.createElement("h5");
                reasonHeader.textContent = "原因:";
                resultDiv.appendChild(reasonHeader);

                const reasonText = document.createElement("p");
                reasonText.textContent = `${data.reason}`; // 原因的值
                resultDiv.appendChild(reasonText);

                // 标准输出标题
                const stdoutHeader = document.createElement("h5");
                stdoutHeader.textContent = "标准输出:";
                resultDiv.appendChild(stdoutHeader);

                const stdoutText = document.createElement("pre");
                stdoutText.textContent = data.stdout || "无"; // 若没有标准输出，则显示“无”
                resultDiv.appendChild(stdoutText);

                // 标准错误标题
                const stderrHeader = document.createElement("h5");
                stderrHeader.textContent = "标准错误:";
                resultDiv.appendChild(stderrHeader);

                const stderrText = document.createElement("pre");
                stderrText.textContent = data.stderr || "无"; // 若没有标准错误，则显示“无”
                resultDiv.appendChild(stderrText);
            }
        }

        // 外部分割线拖动逻辑
        const outerDivider = document.getElementById("outer-divider");
        const leftPanel = document.querySelector(".left-panel");
        const rightPanel = document.querySelector(".right-panel");
        let isDraggingOuter = false;

        outerDivider.addEventListener("mousedown", function () {
            isDraggingOuter = true;
        });

        document.addEventListener("mouseup", function () {
            isDraggingOuter = false;
        });

        document.addEventListener("mousemove", function (e) {
            if (!isDraggingOuter) return;

            const offsetX = e.clientX; /* 当前鼠标X轴坐标 */
            const containerWidth = document.querySelector(".split-container").offsetWidth; /* 容器宽度 */
            const leftWidth = (offsetX / containerWidth) * 100; /* 计算左侧占比 */
            leftPanel.style.width = `${leftWidth}%`;
            rightPanel.style.width = `${100 - leftWidth}%`;
            outerDivider.style.left = `${leftWidth}%`;
        });

        // 内部分割线拖动逻辑
        const innerDivider = document.getElementById("inner-divider");
        const topPart = document.querySelector(".top-part");
        const bottomPart = document.querySelector(".bottom-part");
        let isDraggingInner = false;

        innerDivider.addEventListener("mousedown", function () {
            isDraggingInner = true;
        });

        document.addEventListener("mouseup", function () {
            isDraggingInner = false;
        });

        document.addEventListener("mousemove", function (e) {
            if (!isDraggingInner) return;

            const offsetY = e.clientY; /* 当前鼠标Y轴坐标 */
            const containerHeight = document.querySelector(".left-panel").offsetHeight; /* 左侧高度 */
            const topHeight = (offsetY / containerHeight) * 100; /* 计算顶部占比 */
            topPart.style.height = `${topHeight}%`;
            bottomPart.style.height = `${100 - topHeight}%`;
            innerDivider.style.top = `${topHeight}%`;
        });
    </script>
</body>

</html>